<template>
  <div class="wrapper">
    <el-container>
      <el-header>
        <h2 style="text-align: left;">待办事项 - 库存预警</h2>
      </el-header>
      <el-main>
        <el-table :data="inventWarningList" style="width: 100%" border stripe>
          <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column prop="storeName" label="仓库名称" ></el-table-column>
          <el-table-column prop="productNum" label="商品编码" width="120"></el-table-column>
          <el-table-column prop="productName" label="商品名称" width="150"></el-table-column>
          <el-table-column prop="productInvent" label="库存数量" ></el-table-column>
          <el-table-column prop="threshold" label="预警阈值" ></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" size="mini" @click.prevent="openPurchaseAdd(scope.row)">采购</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            :total="inventPage.totalNum"
            :page-sizes="[10, 20, 50]"
            v-model:page-size="inventPage.pageSize"
            v-model:currentPage="inventPage.pageNum"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top: 20px;"
            @size-change="changeSize"
            @current-change="changeCurrent"
        />
      </el-main>
    </el-container>
  </div>

  <div class="wrapper">
    <el-container>
      <el-header>
        <h2 style="text-align: left;">待办事项 - 临期预警</h2>
      </el-header>
      <el-main>
        <el-table :data="overdueWarningList" style="width: 100%" border stripe>
          <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column prop="storeName" label="仓库名称" ></el-table-column>
          <el-table-column prop="productNum" label="商品编码" width="120"></el-table-column>
          <el-table-column prop="productName" label="商品名称" width="150"></el-table-column>
          <el-table-column prop="productDate" label="生产日期" ></el-table-column>
          <el-table-column prop="suppDate" label="保质期" ></el-table-column>
          <el-table-column label="剩余天数">
            <template #default="scope">
              <el-tag type="error" v-if="scope.row.days=='已过期'">{{ scope.row.days  }}</el-tag>
              <el-tag type="warning" v-else>{{ scope.row.days  }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            :total="overduePage.totalNum"
            :page-sizes="[10, 20, 50]"
            v-model:page-size="overduePage.pageSize"
            v-model:currentPage="overduePage.pageNum"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top: 20px;"
            @size-change="changeSize2"
            @current-change="changeCurrent2"
        />
      </el-main>
    </el-container>
  </div>

  <!-- 添加采购单对话框 -->
  <purchase-add ref="purchaseAddRef" @ok="toPurchaseList"></purchase-add>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { tip, get, del, removeLocalToken, ddo } from "@/common";

const router = useRouter(); // 获取路由器

// 库存预警分页
const inventPage = reactive({
  pageSize: 10,
  pageNum: 1,
  totalNum: 0
})

const changeSize = (size) => {
  inventPage.pageSize = size;
  getInventWarningList()
}
const changeCurrent = (num) => {
  inventPage.pageNum = num;
  getInventWarningList()
}

// 库存预警分页
const overduePage = reactive({
  pageSize: 10,
  pageNum: 1,
  totalNum: 0
})

const changeSize2 = (size) => {
  overduePage.pageSize = size;
  getOverdueWarningList()
}
const changeCurrent2 = (num) => {
  overduePage.pageNum = num;
  getOverdueWarningList()
}

/**
 * 库存预警
 */
const inventWarningList = ref([]);
const getInventWarningList = () => {
  get("/index/inventWarning", inventPage).then(result => {
    inventWarningList.value = result.data.resultList
    inventPage.totalNum = result.data.totalNum;
  })
};
getInventWarningList()

/**
 * 临期预警
 */
const overdueWarningList = ref([]);
const getOverdueWarningList = () => {
  get("/index/overdueWarning").then(result => {
    overdueWarningList.value = result.data.resultList
    overduePage.totalNum = result.data.totalNum;

    // 处理剩余天数：如果过期时间小于今天，则显示已过期，否则显示剩余天数
    overdueWarningList.value.forEach(item => {
      const now = new Date().getTime();
      const endDate = new Date(item.suppDate).getTime();
      item.days = (endDate < now) ? "已过期" : Math.ceil((endDate - now) / (1000 * 60 * 60 * 24)) + " 天";
    })

  })
}
getOverdueWarningList()

// 跳向添加采购单
import PurchaseAdd from "../purchase/purchase-add.vue";
const purchaseAddRef = ref();
const openPurchaseAdd = (commodity) => {
  purchaseAddRef.value.open(commodity);
};

// 跳转到采购单列表页面
const toPurchaseList = (storeId) => {
  // 通过路由导航到采购单列表页面
  router.push({ path: "/purchase/index", query: {"storeId": storeId } });
}

</script>
<style scoped>
.wrapper {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 49%;
  float: left;
  margin-right: 10px;
}

h1 {
  font-size: 2em;
  margin-bottom: 20px;
}
.el-head, .el-main{
  padding: 0;
}
</style>